<template>
	<div class="videos">
		<video-player
		@ready="playerReadied" @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)"
		@seeking="onSeeking" @seeked="onSeeked" :events="['seeking','seeked']" class="video-player vjs-default-skin vjs-big-play-centered" ref="videoPlayer" :playsinline="true"
			:options="playerOptions"
									>
		</video-player>

	</div>
</template>
<script>
	import {
		videoPlayer
	} from 'vue-video-player'


	export default {
		name: 'Videos',
		props: ["videoList", "index"],
		data() {
			return {
				playerOptions: {
					playbackRates: [0.5, 1.0, 1.5, 2.0],
					controls: true,
					autoplay: false, //如果true,浏览器准备好时开始回放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: false, // 导致视频一结束就重新开始。
					preload: 'auto',
					// fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						src: this.videoList.content, // 路径
						type: 'video/mp4' // 类型
					}, ],
					height: document.documentElement.clientHeight,

					videoInit: true,
					fitVideoSize: 'auto',
					notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						// 当前时间和持续时间的分隔符
						timeDivider: true,
						// 显示持续时间
						durationDisplay: true,
						//  播放暂停按钮
						playToggle: true,
						//  进度条显示隐藏
						progressControl: true,
						//  当前播放时间
						currentTimeDisplay: true,
						// 是否显示全屏按钮
						fullscreenToggle: false,
						//  音量控制
						volumeMenuButton: true,
						remainingTimeDisplay: false,
					}
				},
				currentTime: '',
				playing: true,
				isSeeking: false,
				isVideoEnd:false,
				isShowSubs:false,
			}
		},
		created() {
			// 在页面加载时调用autoPlayAction()方法自动播放
			this.autoPlayAction();
		},
		methods: {
// 正在拖动
			onSeeking(event) {
				console.log("拖动开始")
				console.log(event.target.currentTime)
				this.isSeeking = true
			},
			// 拖动结束
			onSeeked(event) {
				console.log("拖动结束")
				console.log(event.target.currentTime)
				this.currentTime=event.target.currentTime;
				this.isSeeking = false
			},
			/* 获取视频播放进度 */
			onPlayerTimeupdate (player) {
				this.currentTime = player.cache_.currentTime
			},
			/* 设置视频开始的进度 */
			playerReadied (player) {
				player.currentTime(this.currentTime)
			},
			// 暂停回调   将视频播放的时间保存
			onPlayerPause (player) {
				console.log('player pause currentTime!', player.cache_.currentTime);

				this.pauseTimer = setTimeout(() => {
					if(this.isVideoEnd)
						return
					if (this.isSeeking)
						return
					// 展示蒙层
					this.isShowSubs = true
				}, 100);

				// let that = this;
				//   存储player.currentTime 是当前暂停时间    用于下次断续播放
			},
			// 定义播放或暂停的方法
			playOrStop() {
				if (this.playing) {
					this.$refs.videoPlayer.player.pause();
					this.playing = false;
				} else {
					this.$refs.videoPlayer.player.play();
					this.playing = true;
				}
			},
			// 自动播放第一个视频
			autoPlayAction() {
				if (this.index == 0) {
					this.playerOptions.autoplay = true;
				}
			},
			// 上滑、下滑时 播放
			play() {
				this.$refs.videoPlayer.player.load(); // 播放时重新加载视频  从头开始播放
				this.$refs.videoPlayer.player.play();
				this.playing = true;
			},
			// 上滑、下滑时 暂停
			stop() {
				this.$refs.videoPlayer.player.pause();
				this.playing = false;
			}
		},
		components: {
			videoPlayer
		}
	}
</script>
<style>
	.videos {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
		//height: 0;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		//align-items: center;
	}
	.videos iframe,
	.videos object,
	.videos embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/*播放按钮设置成宽高一致，圆形，居中*/
	.vjs-custom-skin > .video-js .vjs-big-play-button {
		background-color: rgba(0,0,0,0.45);
		font-size: 3.5em;
		border-radius: 50%;
		height: 2em !important;
		line-height: 2em !important;
		margin-top: -1em !important;
		margin-left: -1em !important;
		width: 2em !important;
		outline: none;
	}

	.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
	.vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time{
		order:3 !important;
	}

	/*进度条背景轨道*/
	.video-js .vjs-slider{
		border-radius: 1em;
	}

	/*进度条进度*/
	.vjs-custom-skin > .video-js .vjs-play-progress, .vjs-custom-skin > .video-js .vjs-volume-level{
		border-radius: 1em;
	}

	/*鼠标进入播放器后，播放按钮颜色会变*/
	.video-js:hover .vjs-big-play-button, .vjs-custom-skin>.video-js .vjs-big-play-button:active, .vjs-custom-skin>.video-js .vjs-big-play-button:focus{
		background-color: rgba(0,0,0,0.4) !important;
	}

	/*control bar*/
	.video-js .vjs-control-bar{
		background-color: rgba(0,0,0,0.2) !important;
	}

	/*点击按钮时不显示蓝色边框*/
	.video-js .vjs-control-bar button{
		outline: none;
	}
	.video-js .vjs-control-bar {
		//z-index: 9999;
		//position: absolute;
		bottom: 50px;
	}

</style>